Conanan

# 移动端适配

# viewport 视口

视口视口就是屏幕中用来显示网页的区域，可以通过查看视口的大小，来观察CSS像素和物理像素的比值

默认情况下：视口宽度 1920px（CSS像素），1920px（物理像素），此时，css像素和物理像素的比是 1:1

放大两倍的情况：视口宽度 960px（CSS像素），1920px（物理像素），此时，css像素和物理像素的比是1:2

我们可以通过改变视口的大小，来改变CSS像素和物理像素的比值

移动端默认视口大小为980px，所有的元素在移动端没有设置视口的情况下都会被缩小。默认情况下，移动端的像素比就是：980/移动端宽度（980/750），如果我们直接在网页中编写移动端代码，这样在980的视口下，像素比是非常不好，导致网页中的内容非常非常的小。所以编写移动页面时，必须要确保有一个比较合理的像素比：

  • 1css像素 对应 2个物理像素
  • 1css像素 对应 3个物理像素

可以通过meta标签来设置视口大小

每一款移动设备设计时，都会有一个最佳的像素比，一般我们只需要将像素比设置为该值即可得到一个最佳效果，将像素比设置为最佳像素比的视口大小我们称其为完美视口。将网页的视口设置为完美视口：

<meta name="viewport" content="width=device-width, initial-scale=1.0">
  • width：设置视口的大小
  • initial-scale：设置缩放比例

# 大小单位

# px

屏幕是由一个一个发光的小点构成，这一个个的小点就是像素，如分辨率：1920 x 1080 说的就是屏幕中小点的数量。在前端开发中像素要分成两种情况讨论：CSS像素 和 物理像素。物理像素，上述所说的小点点就属于物理像素；CSS像素，编写网页时，我们所用像素都是CSS像素。浏览器在显示网页时，需要将CSS像素转换为物理像素然后再呈现。一个css像素最终由几个物理像素显示，由浏览器决定：默认情况下在pc端，一个 CSS 像素 = 一个物理像素。

# em

相对于父元素font-size的倍数

  • font-size：相对于父元素的font-size
  • width：相对于自己的font-size，自己没有则继承父元素的

# rem

相对于根元素，具体哪个元素参考上面 em

# %

不同场景相对的不同！太多了需查文档！举例如下两个：

  • width：相对于父元素的width
  • margin-top：相对于父元素的width！

# 动态设置 html 的 font-size

# CSS

  • 针对不同的手机屏幕，设置不同 html 的 font-size 大小（使用媒体查询设备 width，据此设置 font-size ）
  • 将所有需要适配的元素，如图片、字体大小等，统一使用 rem 单位
<style>
  /* iPhone 5 */
  @media screen and (min-width: 320px) {
    html {
      font-size: 9px;
    }
  }
  /* iPhone 8 */
  @media screen and (min-width: 375px) {
    html {
      font-size: 10px;
    }
  }
  /* iPhone 8 Plus */
  @media screen and (min-width: 414px) {
    html {
      font-size: 11px;
    }
  }
  .box {
    width: 10rem;
    height: 10rem;
    background-color: orange;
    font-size: 1rem;
  }
</style>
<div class="box">Hello World</div>

# JS（最优）

代码太多了，引入即可

# 动态计算 rem 值

要设置固定 px 的 width 时，每次需要用 固定值/根元素的font-size，太麻烦了，解决办法如下：

# postcss-pxtorem（最优）

node 的插件，打包时会自动计算

# less、sass、stylus 计算能力

Less 是一种 CSS 预处理器，对 CSS 进行了扩展，可以嵌套，可以定义变量，可以计算

没有 Node 时可以使用 VSCode 的插件 Easy LESS 暂时替代

← 京东 →